<template>
	<view class="page">
		<view class="bodys">
			<!-- 轮播图 -->
			<view class="banner">
				<image src="../../static/create/banner .png" mode="" class="img"></image>
			</view>
			<!-- 商品服务 -->
			<view class="commodity">
				<view class="commodity_title ">
					<text class="commodity_title_1">
						商品服务
					</text>
					<text class="commodity_title_2">
						已自动选择商品
					</text>
				</view>
				<view class="commodity_choose">
					<uni-data-select v-model="value" :localdata="range" @change="change"
						placeholder="请选择商品"></uni-data-select>
				</view>
				<view class="commodity_money ">
					<view class="">
						付款金额
					</view>
					<view class="commodity_money_input justify-content-start">
						<text>￥</text>
						<input type="number" name="" id="" v-model="money" placeholder="请输入金额" />
					</view>
				</view>
				<view class="commodity_moneyList">
					<view class="body_cont_gird ">
						<view class="body_cont_gird_" v-for="(item,index) in money_list" :key="item.index"
							@click="choose(item.money)">
							<view class="body_cont_gird_fir">
								{{item.money}}元
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 支付方式 -->
			<view class="pay_way">
				支付方式
				<view class="pay_way_list">
					<uni-data-checkbox v-model="pay_way_value" :localdata="pay_way_List" @change="change2"
						mode="default"></uni-data-checkbox>
				</view>
			</view>
			<view class="pay_way_text">
				淘物熊电商狂欢日，新人9.9秒杀包邮。详情点击<text style="color: red;">
					<<淘物熊商城>>
				</text>
			</view>
		</view>
		<view class="bottom ">
			<view class="bottom_page justify-content-sp">
				<view class="bottom_left">
					￥{{money}}
				</view>
				<view class="bottom_right" @click="pay">
					确认付款
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	const jweixin = require('jweixin-module');
	// #endif
	import {
		getGoodslist,
		getCreateOrder
	} from '../../api/trade/index.js'
	import {
		getIndex,
		getSignpPackage,
		orderPay
	} from '../../api/index/index.js'
	export default {
		data() {
			return {
				value: 0,
				range: [],
				range_index: '',
				money: '',
				money_list: [{
						id: 0,
						money: 100
					},
					{
						id: 1,
						money: 300
					},
					{
						id: 2,
						money: 500
					},
					{
						id: 3,
						money: 1000
					},
				],
				pay_way_List: [{
						id: 0,
						icon: '/static/purse/wx.png',
						value: 0,
						bank_type: 1,
						type: 'wechat'
					},
					{
						id: 1,
						icon: '/static/purse/zfb.png',
						value: 1,
						bank_type: 2,
						type: 'alipay'
					}
				],
				pay_way_value: 0,
				type: 'wechat',
				uid: '',
				shop_id: ''
			}
		},
		onLoad(e) {
			this.shop_id = e.shop_id;
			this.init()
		},
		methods: {
			// 初始化H5支付
			getWx() {
				// #ifdef H5
				var data = {
					url: window.location.href.split('#')[0]
				};
				getSignpPackage(data).then(res => {

					jweixin.config({
						debug: false,
						// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.appId,
						// 必填，公众号的唯一标识
						timestamp: res.timestamp,
						// 必填，生成签名的时间戳
						nonceStr: res.nonceStr,
						// 必填，生成签名的随机串
						signature: res.signature,
						// 必填，签名
						jsApiList: ['checkJsApi', 'chooseWXPay']
					});

				})
				// #endif
			},
			init() {
				getGoodslist().then(res => {
					this.range = res.data.data;
					this.uid = res.data.unid;
				});
			},
			change(e) {
				console.log("e:", e);
			},
			change2(e) {
				this.pay_way_value = e.detail.data.value;
				this.type = e.detail.data.type;
			},
			choose(b) {
				this.money = b
			},
			pay() {
				for (var i = 0; i < this.range.length; i++) {
					if (this.range[i].value == this.value) {
						this.range_index = i
					}
				};
				var goods_id = this.range[this.range_index].id;
				var goods_title = this.range[this.range_index].text;
				var data = {
					shop_id: this.shop_id,
					total_amount: this.money,
					goods_id: goods_id,
					goods_title: goods_title,
					unid: this.uid
				}
				getCreateOrder(data).then(res => {
					var date = {
						paytype: this.type,
						order_sn: res.data.order_sn
					};
					orderPay(date).then(re => {
						console.log(re);
					})
					uni.navigateTo({
						url: `/pages/pay_status/index?order_sn=` + res.data.order_sn
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;

		.bodys {
			margin: 30rpx;

			// 轮播图
			.banner {
				height: 170px;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			// 商品服务
			.commodity {
				background-color: white;
				padding: 30rpx;
				margin-top: 30rpx;
				border-radius: 15rpx;

				.commodity_title {
					vertical-align: text-bottom;

					.commodity_title_1 {}

					.commodity_title_2 {
						font-size: 10px;
						color: #999999;
						margin-left: 10rpx;
					}
				}

				.commodity_choose {
					margin: 30rpx 0;
				}

				.commodity_money {
					.commodity_money_input {
						border-bottom: 1px solid #999999;
						padding: 10rpx 0;
					}
				}

				.commodity_moneyList {
					.body_cont_gird {
						display: flex;
						flex-wrap: wrap;
						border-radius: 15rpx;
						margin-top: 30rpx;

						.body_cont_gird_ {
							border: 1px solid #f4f6fa;
							background-color: #f4f6fa;
							width: calc(100% / 3);
							height: calc(100% / 2);
							width: 96px;
							box-sizing: border-box;
							border-radius: 15rpx;
							margin: 5px;
							padding: 20rpx;
							text-align: center;

							.body_cont_gird_fir {
								font-size: 18px;
								font-weight: 550;
							}

						}
					}
				}
			}

			// 支付方式
			.pay_way {
				background-color: white;
				margin-top: 30rpx;
				padding: 30rpx;
				border-radius: 15rpx;
			}

			.pay_way_text {
				font-size: 12px;
				color: #666666;
				padding: 30rpx 0;
			}
		}

		.bottom {
			width: 750rpx;
			background-color: white;
			position: absolute;
			bottom: 0;

			.bottom_page {
				padding: 20rpx;

				.bottom_left {
					padding: 10px;
					color: #ff6433;
				}

				.bottom_right {
					background-color: #ff6433;
					padding: 10px 20px;
					color: white;
					text-align: center;
					border-radius: 30rpx;
				}
			}

		}
	}
</style>